<!-- 下一页 -->
<span class="pdLeft"><</span><span class="pdRight">></span>
<div>
    <div class="owl-wrapper" style=" left: 0px; display: block;width: 2400px;transition:left 0.8s;">
        <div class="owl-item"></div>
        <div class="owl-item"></div>
        <div class="owl-item"></div>
        <div class="owl-item"></div>
        <div class="owl-item"></div>
    </div>
</div>
<style>
    .owl-item{
        width: 300px;
    }
    </style>
<script>
    var owl = document.querySelector('.owl-wrapper')
    var pdLeft = document.querySelector('.pdLeft')
    var pdRight = document.querySelector('.pdRight')
    // 两页，一页4个,载入时自动计时，点击按钮时停止计时，跳到下一页后重新开始计时
    var pdListTimer = setInterval(function () {
        moveList()
    }, 5000)
    pdLeft.onclick = function () {
        clearInterval(pdListTimer);
        moveList()
        pdListTimer = setInterval(function () {
            moveList()
        }, 5000)
    }
    pdRight.onclick = function () {
        clearInterval(pdListTimer);
        moveList()
        pdListTimer = setInterval(function () {
            moveList()
        }, 5000)
    }
    function moveList() {
        if (owl.offsetLeft == 0) {
            var moveSpeed = owl.offsetLeft - 1200
            owl.style.left = moveSpeed + 'px'
        } else if (owl.offsetLeft == -1200) {
            owl.style.left = 0
        }
    }
</script>
<style>
 /*
  轮播点样式
   .el-carousel__indicators--horizontal {
    position: absolute;
    left: auto;
    right: 10px;
    bottom: 10px;
    text-align: right;
  }
  .el-carousel__indicators--horizontal  .el-carousel__indicator--horizontal button {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.5;
  }

  .el-carousel__indicators--horizontal .el-carousel__indicator--horizontal.is-active button {
    width: 24px;
    height: 8px;
    background: #ffffff;
    opacity: 0.5;
    border-radius: 10px;
  } */
</style>




// vue 轮播图
<div :class="{show:ListPage==1}">第一页</div>
<div :class="{show:ListPage==2}">第二页</div>
<div v-if="exploreListPage>1" @click="exploreListPage-=1">上一页</div>
<div v-if="exploreListPage<=2" @click="exploreListPage+=1">下一页</div>